import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class RankingImageGenerator {
  static Future<Uint8List> generateRankingImage({
    required String title,
    required Color backgroundColor,
    required IconData icon,
    double width = 200,
    double height = 120,
  }) async {
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder);
    final size = Size(width, height);

    // 绘制背景
    final backgroundPaint = Paint()
      ..shader = LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          backgroundColor,
          backgroundColor.withOpacity(0.8),
        ],
      ).createShader(Rect.fromLTWH(0, 0, width, height));
    
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, width, height),
        const Radius.circular(12),
      ),
      backgroundPaint,
    );

    // 绘制装饰性图案
    final decorPaint = Paint()
      ..color = Colors.white.withOpacity(0.1)
      ..style = PaintingStyle.fill;

    // 绘制圆形装饰
    canvas.drawCircle(
      Offset(width * 0.8, height * 0.2),
      20,
      decorPaint,
    );
    
    canvas.drawCircle(
      Offset(width * 0.1, height * 0.8),
      15,
      decorPaint,
    );

    // 绘制图标
    final iconPainter = TextPainter(
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          fontFamily: icon.fontFamily,
          fontSize: 32,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
      textDirection: TextDirection.ltr,
    );
    iconPainter.layout();
    iconPainter.paint(
      canvas,
      Offset(
        (width - iconPainter.width) / 2,
        height * 0.25,
      ),
    );

    // 绘制标题
    final titlePainter = TextPainter(
      text: TextSpan(
        text: title,
        style: const TextStyle(
          fontSize: 14,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
    );
    titlePainter.layout(maxWidth: width - 20);
    titlePainter.paint(
      canvas,
      Offset(
        (width - titlePainter.width) / 2,
        height * 0.7,
      ),
    );

    // 绘制音乐波形装饰
    final wavePaint = Paint()
      ..color = Colors.white.withOpacity(0.2)
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final waveHeight = height * 0.1;
    final waveY = height * 0.9;
    final waveWidth = width * 0.6;
    final waveX = (width - waveWidth) / 2;

    for (int i = 0; i < 8; i++) {
      final x = waveX + (i * waveWidth / 7);
      final barHeight = (i % 3 + 1) * waveHeight / 3;
      canvas.drawLine(
        Offset(x, waveY),
        Offset(x, waveY - barHeight),
        wavePaint,
      );
    }

    final picture = recorder.endRecording();
    final img = await picture.toImage(width.toInt(), height.toInt());
    final byteData = await img.toByteData(format: ui.ImageByteFormat.png);
    return byteData!.buffer.asUint8List();
  }

  static Widget buildRankingCardWithImage({
    required String title,
    required Color backgroundColor,
    required IconData icon,
    required VoidCallback onTap,
  }) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 根据可用空间动态计算尺寸
        final cardWidth = constraints.maxWidth;
        final cardHeight = constraints.maxHeight;
        final minDimension = cardWidth < cardHeight ? cardWidth : cardHeight;
        
        // 响应式尺寸计算
        final iconSize = (minDimension * 0.25).clamp(20.0, 50.0);
        final fontSize = (minDimension * 0.08).clamp(10.0, 16.0);
        final padding = (minDimension * 0.08).clamp(8.0, 16.0);
        final decorSize = (minDimension * 0.15).clamp(15.0, 30.0);
        final smallDecorSize = (minDimension * 0.1).clamp(10.0, 20.0);
        
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: backgroundColor.withOpacity(0.3),
                blurRadius: 8,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              borderRadius: BorderRadius.circular(12),
              onTap: onTap,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      backgroundColor,
                      backgroundColor.withOpacity(0.8),
                    ],
                  ),
                ),
                child: Stack(
                  children: [
                    // 背景装饰 - 只在有足够空间时显示
                    if (minDimension > 80) ...[
                      Positioned(
                        top: 8,
                        right: 8,
                        child: Container(
                          width: decorSize,
                          height: decorSize,
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.1),
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 8,
                        left: 8,
                        child: Container(
                          width: smallDecorSize,
                          height: smallDecorSize,
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.1),
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                    ],
                    // 主要内容
                    Padding(
                      padding: EdgeInsets.all(padding),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Flexible(
                            flex: 2,
                            child: Icon(
                              icon,
                              size: iconSize,
                              color: Colors.white,
                            ),
                          ),
                          SizedBox(height: padding * 0.3),
                          Flexible(
                            flex: 2,
                            child: Text(
                              title,
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: fontSize,
                              ),
                              textAlign: TextAlign.center,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          // 音乐波形装饰 - 只在有足够空间时显示
                          if (minDimension > 60) ...[
                            SizedBox(height: padding * 0.2),
                            Flexible(
                              flex: 1,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: List.generate(6, (index) {
                                  final barHeight = (index % 3 + 1) * (minDimension * 0.02).clamp(2.0, 6.0);
                                  return Container(
                                    width: (minDimension * 0.01).clamp(1.0, 3.0),
                                    height: barHeight,
                                    margin: EdgeInsets.symmetric(horizontal: (minDimension * 0.005).clamp(0.5, 2.0)),
                                    decoration: BoxDecoration(
                                      color: Colors.white.withOpacity(0.6),
                                      borderRadius: BorderRadius.circular(1),
                                    ),
                                  );
                                }),
                              ),
                            ),
                          ],
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}